<template>
  <div class="my-tag" @dblclick="open">
    <input
      v-if="edital"
      class="input"
      type="text"
      v-focus
      placeholder="输入标签"
      @keydown.enter="close"
      @blur="close"
      v-model.trim="tag"
    />
    <div class="text" v-else>{{value}}</div>
  </div>
</template>

<script>
export default {
  props:{
    value:{
      type:String,
      required:true
    }
  }, 
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    }
  },
data() {
  return {
    edital:false,
    tag:''
  };
},
methods:{
  open(){
    this.edital=true
    this.tag=this.value
  },
  close(){
    this.edital=false

    this.$emit('input', this.tag);
  }
}
}
</script>

<style >
</style>